// 物体的点击事件
import { useEffect } from 'react'
import * as THREE from 'three'
import './App.css'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
function App() {

    useEffect(() => {
        // 场景
        const scene = new THREE.Scene()
        // 创建相机
        const camera = new THREE.PerspectiveCamera(
            45,//相机的角度
            window.innerWidth / window.innerHeight,//相机的宽高比
            0.1,//相机的近截面
            1000//相机的远截面
        )

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)//设置渲染尺寸
        document.body.appendChild(renderer.domElement)//将渲染器添加到文档中

        // --------------------------------main--------------------------------------------
        // 创建几何体
        // 创建三个球 sphereGeometry是几何体 参数 半径 分段 环数
        const geometry = new THREE.SphereGeometry(1, 32, 32)
        const material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
        const material2 = new THREE.MeshBasicMaterial({ color: 0xffffff })
        const material3 = new THREE.MeshBasicMaterial({ color: 0x0000ff })
        const sphere1 = new THREE.Mesh(geometry, material1)
        sphere1.position.set(0, 0, 0)
        scene.add(sphere1)
        const sphere2 = new THREE.Mesh(geometry, material2)
        sphere2.position.set(4, 0, 0)
        scene.add(sphere2)
        const sphere3 = new THREE.Mesh(geometry, material3)
        sphere3.position.set(-4, 0, 0)
        scene.add(sphere3)

        // 创建射线
        const raycaster = new THREE.Raycaster()
        // 鼠标位置
        const mouse = new THREE.Vector2()
        // 鼠标事件
        window.addEventListener('click', (e) => {
            // 鼠标位置
            mouse.x = (e.clientX / window.innerWidth) * 2 - 1
            mouse.y = -(e.clientY / window.innerHeight) * 2 + 1
            // 通过摄像机和鼠标位置更新射线
            raycaster.setFromCamera(mouse, camera)
            // 计算物体和射线的焦点 检查射线是否与物体相交🍌
            const intersects = raycaster.intersectObjects([sphere1, sphere2, sphere3])
            if (intersects.length > 0) {
                if (intersects[0].object._isSelect) {
                    // 恢复颜色
                    intersects[0].object.material.color.set(
                        intersects[0].object._originColor
                    )
                    // 恢复自定义属性
                    intersects[0].object._isSelect = false
                    return;
                }
                // 添加自定义属性
                intersects[0].object._isSelect = true
                intersects[0].object._originColor = intersects[0].object.material.color.clone()
                // 设置他的材质为红色
                intersects[0].object.material.color.set(0xff0000)
            }
        })

        // --------------------------------main--------------------------------------------

        // 设置相机位置
        camera.position.z = 10
        camera.position.y = 2
        camera.position.x = 2
        camera.lookAt(0, 0, 0)

        // 添加世界坐标辅助器
        const axesHelper = new THREE.AxesHelper(5)
        scene.add(axesHelper)

        //添加抗锯齿效果
        renderer.antialias = true
        // 创建轨道控制器
        const controls = new OrbitControls(camera, renderer.domElement)
        // 阻尼
        controls.enableDamping = true
        // 旋转
        controls.enableRotate = true
        // 缩放
        controls.enableZoom = true
        // 设置阻尼系数
        controls.dampingFactor = 0.05
        // 渲染
        renderer.render(scene, camera)

        // 渲染函数
        function animate() {
            requestAnimationFrame(animate)
            // 更新轨道控制器
            controls.update()
            renderer.render(scene, camera)
        }
        // 调用渲染函数
        animate()
        // 监听窗口变化
        window.addEventListener('resize', () => {
            // 更新相机
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            // 更新渲染器
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.setPixelRatio(window.devicePixelRatio)
        })
    }, [])
    return (
        <>
        </>
    )
}

export default App
